<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="jqueryui/css/trontastic/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"></script>

<script>
$(function(){
	$(".box").hover(
		function(){
			/*$(this).next().removeClass('inactive_title').fadeIn(3000);*/
			$(this).next().animate({opacity:1,width:100},100,function(){});
			
		},function(){
			$(this).next().animate({opacity:0,width:0},100,function(){});
			/*$(this).next().addClass('inactive_title').fadeOut(3000);*/
		}
	);
	
	$(".box").click(function(){
		//$("#sidepanel").slideUp();
		$(".test").not($(this).parent()).slideUp();
	});
	
	
	$("#home").click(function(){
		$(".test").slideDown();
	});
});
</script>

</head>
<body>
	<button id="home">Home</button>
	<div id="sidepanel">

		<div class="test">
			<div class="box">
				<img src="imgs/pencil.png" alt="" >
			</div>
			<div class="title"><span>Home</span></div>
		</div>
		
		<div class="test">
			<div class="box">
				<img src="imgs/icon.png" alt="" >
			</div>
			<div class="title"><span>About</span></div>
		</div>

		<div class="test">
			<div class="box">
				<img src="imgs/pencil.png" alt="" >
			</div>
			<div class="title"><span>Home</span></div>
		</div>
		
		<div class="test">
			<div class="box">
				<img src="imgs/icon.png" alt="" >
			</div>
			<div class="title"><span>About</span></div>
		</div>
	</div>
	<div id="content">
		Welcome
	</div> 
</body>
</html>